<template>

  <div class="int_box">
    <div class="box">
      <div class="left">尊敬的</div>
      <div class="right">
        <input type="text" placeholder="请输入称呼" v-model.trim="main">
      </div>
    </div>

    <div class="box">
      <div class="left">宴席时间</div>
      <div class="right">
        <input type="datetime-local"  v-model.trim="time">
      </div>
    </div>

    <div class="box">
      <div class="left">联系电话</div>
      <div class="right">
        <input type="tel" placeholder="请输入联系电话" v-model.trim="phone">
      </div>
    </div>

    <div class="box">
      <div class="left">宴席地址</div>
      <div class="right">
        <!--<input type="text" placeholder="请输入地址" v-model.trim="addr" disabled="disabled">-->
        <textarea type="text" rows="4" v-model="addr" placeholder="请输入宴席地址"></textarea>
        <img @click="goAddress()" src="../../assets/images/location1-icon.png" alt="">
      </div>
    </div>

    <div class="box">
      <div class="left left-door">包间号或幢号楼层</div>
      <div class="right right-door">
        <input type="text" placeholder="请输入（选填）" v-model.trim="address">
      </div>
    </div>


    <div class="box">
      <textarea class="Text" placeholder="添加备注（不超过120字）" maxlength="120" v-model.trim="message"></textarea>
    </div>
    <div class="box_notes">
      *注：英拉酒业祝您用餐愉快！
    </div>
    <div class="box_btn">
      <input type="button" value="邀请好友" @click="invitation()">
    </div>
    <!--调用高德地图-->
    <iframe v-if="gaodeMap" @load="loadIframe" id="test"
            :src="'https://m.amap.com/picker/?key='+mapKey" frameborder="0"></iframe>
  </div>
</template>

<script>

  import global from '../public/global.vue'

  export default {
    name: "newly",
    data() {
      return {
        main: "",
        time: "",
        phone: "",
        addr: "",
        address: "",
        message: "",
        gaodeMap: false,//显示高德地图
        mapKey: global.mapKey,
      }
    },
    created: function () {
      document.title = "新建邀请函";
//      this.addr = this.addr ? this.addr : '';
      let type = this.$route.query.type;
      if(type=="buy"){
        let box=window.localStorage.getItem("box");
        box=JSON.parse(box);
        this.time=box.time;
        this.addr=box.addr;
        this.address=box.num;
        this.phone=box.phone;
      }

    },
    watch:{
      addr(){
        this.addr=this.addr?this.addr:'';
      }

    },
    methods: {
      invitation() {
        this.showPop = true;

        let self = this;
        let date=new Date(self.time);
        let time=self.time.split('T');
        let myShare = new Object();
        myShare.theme = self.main;
        myShare.invitationTime =time[0]+' '+time[1] ;
        myShare.phone = self.phone;
        myShare.address = self.addr;
        myShare.addressDetail = self.address;
        myShare.notes = self.message;
//        let date=new Date(myShare.invitationTime);
//        let tSelect=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDay()+' '+date.getHours()+':'+date.getMinutes();
//        let sTime=new Date(tSelect);
//        sTime=sTime.getTime();
        let tSelect=date.getTime();
        let dateNow=new Date();
        let tNow=dateNow.getTime();
//        console.log(myShare.invitationTime);
        if(tNow>tSelect){
          alert('时间错误：选择时间小于当前的时间');
//          this.time=new Date();
          return;
        }
        if (self.main == "" || self.phone == "" || self.addr == "") {
          alert("输入不完整");
          return;
        }
        if(self.time == ""){
          alert("输入明确时间");
          return;
        }
        let params = new URLSearchParams();
        params.append('myShare', JSON.stringify(myShare));
        self.$http({
          url: global.apiUrl + '/myShare/addMyShare',
          method: 'post',
          data: params,
        }).then(res => {
          if (res.data.data != null) {
            self.$router.push({path: '/invitation?id=' + res.data.data});
          }

        })
      },
      //iframe调用高德地图
      loadIframe() {
        let _this = this;
        let iframe = document.getElementById('test').contentWindow;
        iframe.postMessage('hello', 'https://m.amap.com/picker/');
        window.addEventListener("message", function (e) {
          _this.gaodeMap = false;
          _this.addr = e.data.address + e.data.name;
        }, false);

      },
      // 打开高德地图选址
      goAddress() {
        this.gaodeMap = true;
      },

    }

  }
</script>

<style lang="less" scoped>
  .int_box {
    width: 100%;
    padding-top: 2%;
    .box {
      width: 95%;
      margin: 0 auto;
      display: flex;
      font-size: 1rem;
      border-bottom:1px dashed #eee;
      .left {
        width: 25%;
        line-height: 38px;
        color: #a7a5a5;
      }
      .left-door {
        width: 25%;
        padding-top:4px;
        line-height: 24px;
      }
      .right {
        width: 75%;
        /*height: 40px;*/
        textarea {
          width: 87%;
          padding-left: 8px;
          font-size: 0.95rem;
          resize: none;
          border: none;
          margin-top: 8px;
        }
        img {
          width: 5%;
          margin-top: 10px;
        }
      }

      .right > input {
        width: 95%;
        height: 38px;
        line-height: 38px;
        border: none;
        padding-left: 10px;
        font-size: 0.95rem;
        outline: none;
        text-overflow: ellipsis;
        background: transparent;

      }
      input::placeholder,textarea::placeholder{
        font-size: 0.95rem;
      }
      .right-door {
        width: 75%;
        input {
          height:50px;
        }
      }
    }
    .box > textarea {
      width: 100%;
      height: 80px;
      resize: none;
      margin-top: 10px;
      font-size: 0.95rem;
      padding-top: 10px;
      border: none;
      outline: none;
      font-weight: normal;
    }
    .Text::-webkit-input-placeholder {
      color: #e2dfdf;
    }
    .box_notes {
      width: 95%;
      margin: 10px auto;
      font-size: 0.8rem;
      color: #e2dfdf;
    }
    .box_btn {
      width: 92%;
      margin: 20px auto;
    }
    .box_btn > input {
      width: 100%;
      height: 35px;
      background: #D53F40;
      outline: none;
      border: none;
      color: #FFF;
      font-size: 1rem;
      border-radius: 6px;
      letter-spacing: 5px;
    }
    /*高德地图*/
    iframe {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      z-index: 100;
    }
  }
</style>
